<!-- 申诉成绩修改-->
<template>
  <div>
    <el-dialog title="申诉审核" :close-on-click-modal="false" :visible.sync="viewShow">
      <el-main>
        <el-col :span="12">
          <div style="font-size: larger;">{{appealStatus?"复核申诉内容":"申诉内容"}}</div>
          <div v-if="(valueAppealContentVo.appealContent===1 || valueAppealContentVo.appealContent===2)" style="margin-top: 30px;color: #0000cc">管家评价结果</div>
          <div v-if="(valueAppealContentVo.appealContent===1 || valueAppealContentVo.appealContent===3)" style="color: #0000cc">益伴价值观管理小组评价结果</div>
          <div style="font-size: larger;margin-top: 30px">申诉说明</div>
          <div style="margin-top: 10px"><span class="grid-content bg-purple">{{valueAppealContentVo.appealDescribe}}</span></div>
          <div class="imgContent" v-html="imgHandle(valueAppealContentVo.appealImg)"></div>

          <!--          复核情况 首次申诉内容-->
          <div v-if="appealStatus" style="margin-top: 30px">
            <div style="font-size: larger;">首次申诉结果</div>
            <div style="color: #0000cc;margin-top: 10px">审核超时</div>
            <div style="font-size: larger;margin-top: 30px;">首次申诉内容</div>
            <div v-if="(valueAppealContentVo.firstAppealContent===1 || valueAppealContentVo.firstAppealContent===2)" style="margin-top: 30px;color: #0000cc">管家评价结果</div>
            <div v-if="(valueAppealContentVo.firstAppealContent===1 || valueAppealContentVo.firstAppealContent===3)" style="color: #0000cc">益伴价值观管理小组评价结果</div>
            <div style="font-size: larger;margin-top: 30px">申诉说明</div>
            <div style="margin-top: 10px"><span class="grid-content bg-purple">{{valueAppealContentVo.firstAppealDescribe}}</span></div>
            <div class="imgContent" v-html="imgHandle(valueAppealContentVo.appealImg)"></div>
          </div>
        </el-col>
        <el-col :span="12" style="border-left: 1px solid #C5C5C5;">
          <!--运营评价-->
          <div v-if="(valueAppealContentVo.appealContent===1 || valueAppealContentVo.appealContent===3)" style="margin-left: 30px">
            <span style="font-size: larger;">运营评价</span>
            <el-form ref="dataForm" :model="form" style="margin-top: 30px">
              <el-form-item label="运营评价总得分：" prop="values1">
                <span style="color: #0000cc">{{staffMemberEvaluateResultVo?staffMemberEvaluateResultVo.totalScore:""}}</span>
              </el-form-item>
              <el-form-item v-for="item in this.staffMemberEvaluateArr">
                <el-form-item :label=item.labelTitle prop="values1" label-width="78px">
                  <el-input class="input" v-model="item.valueScore" type="number" max="5" min="1" ></el-input>
                  分
                </el-form-item>
                <!--    评分举例说明 -->
                <div v-if="item.valueDescribe" style="margin-top: 20px">
                  <el-row>
                    <el-col :span="12">
                      <span>评分举例说明</span>
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="operationAction(item)">删除</el-button>
                    </el-col>
                  </el-row>
                  <div style="margin-top: 10px">{{item.valueDescribe}}</div>
                </div>
                <!--      照片墙&ndash;&gt;-->
                <div class="imgContent">
                  <div class="imgitem" v-for="(imgUrl, index) in item.valueImg">
                    <img :src="imgUrl">
                    <div class="del"><i class="el-icon-circle-close-outline" @click="delImg(item.valueImg,index)"></i></div>
                  </div>
                </div>
                <div v-if="(item.valueDescribe || item.valueImg.length>0)" style="border-bottom: 1px solid #C5C5C5"></div>

              </el-form-item>

            </el-form>

          </div>

          <!--管家评价-->
          <div v-if="(valueAppealContentVo.appealContent===1 || valueAppealContentVo.appealContent===2)" style="margin-left: 30px">
            <span style="font-size: larger;">管家评价</span>
            <el-form ref="dataForm" :model="form" style="margin-top: 30px">
              <el-form-item label="下级评价总得分：" prop="values1">
                <span style="color: #0000cc">{{valueCommentLogVo?valueCommentLogVo.totalScore:""}}</span>
              </el-form-item>
              <el-form-item v-for="item in valueCommentLogVoArr">
                <el-form-item :label=item.labelTitle prop="values1" label-width="78px">
                  <el-input class="input" v-model="item.valueScore" type="number" max="5" min="1"></el-input>
                  分
                </el-form-item>
                <!--    评分举例说明 -->
                <div v-if="item.valueDescribe" style="margin-top: 20px">
                  <el-row>
                    <el-col :span="12">
                      <span>评分举例说明</span>
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="operationAction(item)">删除</el-button>
                    </el-col>
                  </el-row>
                  <div style="margin-top: 10px">{{item.valueDescribe}}</div>
                </div>
                <!--      照片墙&ndash;&gt;-->
                <div class="imgContent" style="border-bottom: 1px solid #C5C5C5">
                  <div class="imgitem" v-for="(imgUrl, index) in item.valueImg">
                    <img :src="imgUrl">
                    <div class="del"><i class="el-icon-circle-close-outline" @click="delImg(item.valueImg,index)"></i></div>
                  </div>
                </div>
                <div v-if="(item.valueDescribe || item.valueImg.length>0)" style="border-bottom: 1px solid #C5C5C5"></div>

              </el-form-item>

            </el-form>

          </div>

          <el-form ref="dataForm" :model="form" style="margin-left: 70px;margin-top: 70px">
            <el-form-item label="本季度提现服务系数：" prop="values1">
              <el-input class="input" v-model="valueAppealContentVo.ratio" type="number"></el-input>
            </el-form-item>
          </el-form>

        </el-col>


      </el-main>
      <span slot="footer" class="dialog-footer">
      <el-button @click="viewShow = false">返回</el-button>
      <el-button @click="confirmAction()">确认修改</el-button>
      </span>
    </el-dialog>
    <bigimg :bigimgsrc="bigsrc" v-if="showbig" @hideimg="hidebig"></bigimg>
  </div>
</template>

<script>
    import bigimg from '@/components/bigimg/index'
    export default {
        name: "appealScoreModify",
        components: {bigimg},
        data () {
            return {
                showbig: false,
                bigsrc:"",
                viewShow: false,
                reviewFailShow:false,
                appealStatus:false, // false 首次申诉  true 复核申诉
                userId:"",
                appealId:"",
                form: {
                    content:"234"
                },

                // 请求数据
                bindData:{},

                // 申诉内容
                valueAppealContentVo:{},
                staffMemberEvaluateArr:[],
                valueCommentLogVoArr:[],

                // 运营评价
                staffMemberEvaluateResultVo:{},
                // 管家评价
                valueCommentLogVo:{},

                // 数据总的对象 由各个对象组成 传值用
                dataObject:{},

                failReasonContent:"",


            };
        },
        methods: {
            init (appealId,appealStatus) {

                this.viewShow = true
                this.appealId = appealId;

                this.bindData = {};
                this.staffMemberEvaluateResultVo = {};
                this.valueCommentLogVo = {};
                this.valueAppealContentVo = {};
                this.staffMemberEvaluateArr = [];
                this.valueCommentLogVoArr = [];

                this.getData()

                this.appealStatus = appealStatus


            },

            // 获取申诉内容
            getData(){

                let urlStr = "/value/valueappeallog/firstAppealInfo/" + this.appealId;

                if (this.appealStatus) {
                    urlStr = "/value/valueappeallog/secondAppealInfo/" + this.appealId;
                }

                this.$http({
                    url: this.$http.adornUrl(urlStr),
                    method: "get",
                    // params: this.$http.adornParams(obj)
                }).then(({ data }) => {

                    if (data && data.code === 0) {

                        this.bindData = data.valueAppealLog;
                        this.valueAppealContentVo = data.valueAppealLog;
                        if (data.valueAppealLog.staffMemberEvaluation) {
                            this.staffMemberEvaluateArr = this.getEvaluateArr(data.valueAppealLog.staffMemberEvaluation);
                        }
                        if (data.valueAppealLog.superiorEvaluation) {
                            this.valueCommentLogVoArr = this.getEvaluateArr(data.valueAppealLog.superiorEvaluation);
                        }
                        this.staffMemberEvaluateResultVo = data.valueAppealLog.staffMemberEvaluation;
                        this.valueCommentLogVo = data.valueAppealLog.superiorEvaluation;

                    }
                });
            },

            getEvaluateArr(object){

                let labelTitleArr = ["用户至上  ","正直坦诚  ","极致执行  ","精进创新  ","团结共赢  "]
                let arr = []

                for (var i = 0;i < 5;i++) {

                    let item = {
                        labelTitle:labelTitleArr[i],
                        values1: [
                            {required: true, message: "分数不能为空", trigger: "blur"}
                        ],
                    }

                    if (i === 0) {
                        item.valueScore = parseInt(object.firstValueScore);
                        item.valueDescribe = object.firstValueDescribe;
                        item.valueImg = Array.isArray(object.firstValueImg)?object.firstValueImg:[]
                        // item.valueImg = object.firstValueImg;
                    } else if (i === 1) {
                        item.valueScore = parseInt(object.secondValueScore);
                        item.valueDescribe = object.secondValueDescribe;
                        // item.valueImg = object.secondValueImg;
                        item.valueImg = Array.isArray(object.secondValueImg)?object.secondValueImg:[]

                    } else if (i === 2) {
                        item.valueScore = parseInt(object.thirdValueScore);
                        item.valueDescribe = object.thirdValueDescribe;
                        // item.valueImg = object.thirdValueImg;
                        item.valueImg = Array.isArray(object.thirdValueImg)?object.thirdValueImg:[]

                    } else if (i === 3) {

                        item.valueScore = parseInt(object.fourthValueScore);
                        item.valueDescribe = object.fourthValueDescribe;
                        // item.valueImg = object.fourthValueImg;
                        item.valueImg = Array.isArray(object.fourthValueImg)?object.fourthValueImg:[]
                    } else if (i === 4) {
                        item.valueScore = parseInt(object.fifthValueScore);
                        item.valueDescribe = object.fifthValueDescribe;
                        // item.valueImg = object.fifthValueImg;
                        item.valueImg = Array.isArray(object.fifthValueImg)?object.fifthValueImg:[]
                    }


                    arr.push(item)

                }

                return arr;
            },

            getEvaluateObject(){

                // 服务系数
                this.bindData.ratio = this.valueAppealContentVo.ratio;

                if (this.staffMemberEvaluateResultVo && this.staffMemberEvaluateArr.length>0) {
                    // 1.运营评价
                    // 用户至上
                    this.bindData.staffMemberEvaluation.firstValueScore = this.staffMemberEvaluateArr[0].valueScore;
                    this.bindData.staffMemberEvaluation.firstValueDescribe = this.staffMemberEvaluateArr[0].valueDescribe;
                    this.bindData.staffMemberEvaluation.firstValueImg = this.staffMemberEvaluateArr[0].valueImg;

                    // 正直坦诚
                    this.bindData.staffMemberEvaluation.secondValueScore = this.staffMemberEvaluateArr[1].valueScore;
                    this.bindData.staffMemberEvaluation.secondValueDescribe = this.staffMemberEvaluateArr[1].valueDescribe;
                    this.bindData.staffMemberEvaluation.secondValueImg = this.staffMemberEvaluateArr[1].valueImg;

                    // 极致执行
                    this.bindData.staffMemberEvaluation.thirdValueScore = this.staffMemberEvaluateArr[2].valueScore;
                    this.bindData.staffMemberEvaluation.thirdValueDescribe = this.staffMemberEvaluateArr[2].valueDescribe;
                    this.bindData.staffMemberEvaluation.thirdValueImg = this.staffMemberEvaluateArr[2].valueImg;

                    // 精进创新
                    this.bindData.staffMemberEvaluation.fourthValueScore = this.staffMemberEvaluateArr[3].valueScore;
                    this.bindData.staffMemberEvaluation.fourthValueDescribe = this.staffMemberEvaluateArr[3].valueDescribe;
                    this.bindData.staffMemberEvaluation.fourthValueImg = this.staffMemberEvaluateArr[3].valueImg;

                    // 团结共赢
                    this.bindData.staffMemberEvaluation.fifthValueScore = this.staffMemberEvaluateArr[4].valueScore;
                    this.bindData.staffMemberEvaluation.fifthValueDescribe = this.staffMemberEvaluateArr[4].valueDescribe;
                    this.bindData.staffMemberEvaluation.fifthValueImg = this.staffMemberEvaluateArr[4].valueImg;

                }

                if (this.valueCommentLogVo && this.valueCommentLogVoArr.length>0) {
                    // 2.管家评价

                    // 用户至上
                    this.bindData.superiorEvaluation.firstValueScore = this.valueCommentLogVoArr[0].valueScore;
                    this.bindData.superiorEvaluation.firstValueDescribe = this.valueCommentLogVoArr[0].valueDescribe;
                    this.bindData.superiorEvaluation.firstValueImg = this.valueCommentLogVoArr[0].valueImg;

                    // 正直坦诚
                    this.bindData.superiorEvaluation.secondValueScore = this.valueCommentLogVoArr[1].valueScore;
                    this.bindData.superiorEvaluation.secondValueDescribe = this.valueCommentLogVoArr[1].valueDescribe;
                    this.bindData.superiorEvaluation.secondValueImg = this.valueCommentLogVoArr[1].valueImg;

                    // 极致执行
                    this.bindData.superiorEvaluation.thirdValueScore = this.valueCommentLogVoArr[2].valueScore;
                    this.bindData.superiorEvaluation.thirdValueDescribe = this.valueCommentLogVoArr[2].valueDescribe;
                    this.bindData.superiorEvaluation.thirdValueImg = this.valueCommentLogVoArr[2].valueImg;

                    // 精进创新
                    this.bindData.superiorEvaluation.fourthValueScore = this.valueCommentLogVoArr[3].valueScore;
                    this.bindData.superiorEvaluation.fourthValueDescribe = this.valueCommentLogVoArr[3].valueDescribe;
                    this.bindData.superiorEvaluation.fourthValueImg = this.valueCommentLogVoArr[3].valueImg;

                    // 团结共赢
                    this.bindData.superiorEvaluation.fifthValueScore = this.valueCommentLogVoArr[4].valueScore;
                    this.bindData.superiorEvaluation.fifthValueDescribe = this.valueCommentLogVoArr[4].valueDescribe;
                    this.bindData.superiorEvaluation.fifthValueImg = this.valueCommentLogVoArr[4].valueImg;

                }


            },



            imgHandle(appealImgArr){

                let imgHtml = ''

                if (appealImgArr){
                    appealImgArr.map((item) => {
                        imgHtml += `<img src="${item}" style="width: 100px;height:auto;margin: 15px; @click="setbig(item)">`
                    })
                    return imgHtml
                }

            },

            // 确认修改
            confirmAction(){


                let isreturn = false
                this.staffMemberEvaluateArr.map((item) => {
                    if (item.valueScore === ""&&!isreturn){

                        this.$message.error(item.labelTitle+"分数为空");
                        isreturn = true
                        return false
                    }
                })

                this.valueCommentLogVoArr.map((item) => {
                    if (item.valueScore === ""&&!isreturn){
                        this.$message.error(item.labelTitle+"分数为空");
                        isreturn = true
                        return false
                    }
                })


                if (this.valueAppealContentVo.ratio === "" && !isreturn) {
                    this.$message.error("提现服务系数不能为空");
                    isreturn = true
                }

                if(this.valueAppealContentVo.ratio){

                    if(this.valueAppealContentVo.ratio.toString().indexOf('.')>-1&&this.valueAppealContentVo.ratio.toString().split('.')[1].length>1){
                        this.$message({
                            message: '请保留一位小数',
                            type: "error"
                        })
                        isreturn = true
                        return false
                    }
                } else {
                    this.$message({
                        message: '请输入正确格式的数字',
                        type: "error"
                    })
                    isreturn = true
                    return false
                }

                this.staffMemberEvaluateArr.map((item) => {
                    if (!isreturn){
                        if (!this.isInteger(item.valueScore)) {
                            console.log(item.valueScore);
                            this.$message.error(item.labelTitle+"请输入整数");
                            isreturn = true
                            return false
                        } else {
                            if (item.valueScore > 5 || item.valueScore < 1) {
                                this.$message.error(item.labelTitle+"数值应该1-5");
                                isreturn = true
                                return false
                            }
                        }

                    }
                })

                this.valueCommentLogVoArr.map((item) => {
                    if (!isreturn){
                        if (!this.isInteger(item.valueScore)) {

                            this.$message.error(item.labelTitle+"请输入整数");
                            isreturn = true
                            return false
                        } else {
                            if (item.valueScore > 5 || item.valueScore < 1) {
                                this.$message.error(item.labelTitle+"数值应该1-5");
                                isreturn = true
                                return false
                            }
                        }

                    }
                })


                if(isreturn) {
                    return false
                }

                this.getEvaluateObject();


                this.$http({
                    url: this.$http.adornUrl("/value/valuecommentlog/update"),
                    method: "post",
                    data: this.$http.adornData(this.bindData)
                }).then(({ data }) => {

                    if (data && data.code === 0) {

                        this.$message.success("修改成功");
                        this.viewShow = false;
                        this.goBack();

                    } else {
                        this.$message({
                            message: data.msg,
                            type: "error"
                        })

                    }

                });



            },

            isInteger(obj){

                // return  Math.round(obj) === obj   //是整数，则返回true，否则返回false
                return typeof Number(obj) === 'number' && Number(obj)%1 === 0;

            },

            // 删除评论文字
            operationAction(item) {
                item.valueDescribe = ""
            },
            // 删除图片
            delImg(imgArr,index) {
                imgArr.splice(index,1);
            },

            goBack () {
                this.$emit('goback')
            },
            setbig(imgUrl) {
                this.bigsrc = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIWlliaQwAmTODz9ec0tXFUicfhZP9qmJmot4vib7ZC3c9vmqXkSlL21sSHw8IcBLicrazZAGxXszr8FA/132'
                this.bigsrc = imgUrl
                this.showbig = true
            },
            hidebig() {
                this.showbig = false
            },
        }
    }
</script>


<style lang="scss" scoped>
  .input {
    width: 100px;
  }

  .imgContent {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .imgitem{
      position: relative;
      width: 120px;
      height: 120px;
      margin: 10px 20px;
      img{
        width:100%;
        height: 100%;
      }
      .del{
        font-size: 20px;
        position: absolute;
        top: -15px;
        right: -15px;
      }
    }
  }
</style>
